<template>
  <view class="repair-container">
    <!-- 标题栏 -->
    <view class="repair-header">
      <text class="repair-title">维修任务</text>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <text class="filter-count">共{{ filteredTasks.length }}条</text>
      <picker mode="selector" :range="statusOptions" :value="selectedStatusIndex" @change="onStatusChange">
        <view class="filter-item">状态：{{ statusOptions[selectedStatusIndex] }}</view>
      </picker>
      <picker mode="selector" :range="typeOptions" :value="selectedTypeIndex" @change="onTypeChange">
        <view class="filter-item">维修方式：{{ typeOptions[selectedTypeIndex] }}</view>
      </picker>
      <view class="filter-item" @click="showDatePicker = true">
        日期：{{ dateRangeText }}
      </view>
      <uni-datetime-picker
        v-if="showDatePicker"
        type="daterange"
        :start="dateRange[0]"
        :end="dateRange[1]"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </view>

    <!-- 维修任务卡片列表 -->
    <view class="task-list">
      <view v-for="(task, idx) in filteredTasks" :key="task.id" class="task-card">
        <view class="task-flag" v-if="isOneDayBefore(task.date)">🚩</view>
        <view class="task-info">
          <text>维修单号：{{ task.id }}</text>
          <text>维修方式：{{ task.type }}</text>
          <text>预约日期：{{ task.date }}</text>
        </view>
        <view class="task-status">
          <text v-if="task.status === '进行中'" class="status-doing">进行中</text>
          <text v-else class="status-done">已完成</text>
        </view>
        <button class="detail-btn" @click="viewDetail(task)">查看详情</button>
      </view>
      <view v-if="filteredTasks.length === 0" class="no-data">暂无维修任务</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import orderApi from '@/api/order'
// 如需使用 uni-datetime-picker 组件，请确保已安装并引入

// 维修任务数据
const tasks = ref([])

const statusOptions = ['全部', '进行中', '已完成']
const typeOptions = ['全部', '到店维修', '上门取车']
const selectedStatusIndex = ref(0)
const selectedTypeIndex = ref(0)
const showDatePicker = ref(false)
const dateRange = ref(['', ''])

const dateRangeText = computed(() => {
  if (dateRange.value[0] && dateRange.value[1]) {
    return `${dateRange.value[0]} ~ ${dateRange.value[1]}`
  }
  return '全部'
})

const filteredTasks = computed(() => {
  return tasks.value.filter(task => {
    // 状态筛选
    if (selectedStatusIndex.value !== 0 && task.status !== statusOptions[selectedStatusIndex.value]) return false
    // 维修方式筛选
    if (selectedTypeIndex.value !== 0 && task.type !== typeOptions[selectedTypeIndex.value]) return false
    // 日期筛选
    if (dateRange.value[0] && dateRange.value[1]) {
      const taskDate = new Date(task.date.replace(/-/g, '/'))
      const start = new Date(dateRange.value[0])
      const end = new Date(dateRange.value[1])
      if (taskDate < start || taskDate > end) return false
    }
    return true
  })
})

function onStatusChange(e) {
  selectedStatusIndex.value = e.detail.value
}
function onTypeChange(e) {
  selectedTypeIndex.value = e.detail.value
}
function onDateConfirm(e) {
  dateRange.value = e
  showDatePicker.value = false
}

function isOneDayBefore(dateStr) {
  // 判断是否为预约前一天
  const taskDate = new Date(dateStr.replace(/-/g, '/'))
  const now = new Date()
  const diff = (taskDate - now) / (1000 * 60 * 60 * 24)
  return diff > 0 && diff <= 1
}

function viewDetail(task) {
  uni.navigateTo({
    url: `/pages/repair/details?id=${encodeURIComponent(task.id)}` // 保证id为字符串并正确传递
  })
}

// 页面加载时获取维修列表
onMounted(async () => {
  try {
    const res = await orderApi.getRepairList()
    if (res.code === 200) {
      tasks.value = Array.isArray(res.data) ? res.data.map(item => ({
        id: String(item.id), // 强制转字符串，防止精度丢失
        type: item.type,
        date: item.reservationTime, // 预约时间
        status: item.status
      })) : []
    } else {
      uni.showToast({ title: res.msg || '获取维修列表失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '网络错误', icon: 'none' })
  }
})
</script>

<style scoped>
.repair-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.repair-header {
  background: #fff;
  padding: 30rpx 0 20rpx 0;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #eee;
}
.repair-title {
  color: #333;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: #fff;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
}
.filter-count {
  color: #007aff;
  font-weight: bold;
}
.filter-item {
  margin-left: 10rpx;
  color: #333;
}
.task-list {
  padding: 20rpx;
}
.task-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
  padding: 20rpx 20rpx 20rpx 40rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.task-flag {
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  font-size: 32rpx;
  color: #ff3b30;
}
.task-info text {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}
.task-status {
  margin-top: 10rpx;
}
.status-doing {
  color: #007aff;
}
.status-done {
  color: #999;
}
.detail-btn {
  margin-top: 10rpx;
  background: #007aff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 10rpx 0;
}
.no-data {
  text-align: center;
  color: #999;
  margin-top: 40rpx;
}
</style>
